<script lang="ts" setup>
const route = useRoute()
const router = useRouter()

onMounted(() => {
  console.log(route)
  console.log(router)
})

const cameras = [
  {
    title: '车位',
    url: 'rtsp://admin:123456@10.0.1.2:554/stream1',
    x: '90',
    y: '490',
  },
  {
    title: '西侧空地',
    url: 'rtsp://admin:123456@10.0.1.3:554/stream1',
    x: '30',
    y: '460',
  },
  {
    title: '1车间',
    url: 'rtsp://admin:guyaqi5858@10.0.1.4:554/stream1',
    x: '30',
    y: '400',
  },
  {
    title: '1车间',
    url: 'rtsp://admin:guyaqi5858@10.0.1.5:554/stream1',
    x: '85',
    y: '420',
  },
  {
    title: '1车间',
    url: 'rtsp://admin:guyaqi5858@10.0.1.6:554/stream1',
    x: '85',
    y: '400',
  },
  {
    title: '1车间',
    url: 'rtsp://admin:guyaqi5858@10.0.1.7:554/stream1',
    x: '30',
    y: '420',
  },
  {
    title: '2车间',
    url: 'rtsp://admin:guyaqi5858@10.0.1.8:554/stream1',
    x: '30',
    y: '375',
  },
  {
    title: '2车间',
    url: 'rtsp://admin:guyaqi5858@10.0.1.9:554/stream1',
    x: '30',
    y: '355',
  },
  {
    title: '2车间',
    url: 'rtsp://admin:guyaqi5858@10.0.1.10:554/stream1',
    x: '85',
    y: '375',
  },
  {
    title: '2车间',
    url: 'rtsp://admin:guyaqi5858@10.0.1.11:554/stream1',
    x: '85',
    y: '355',
  },
  {
    title: '西库房',
    url: 'rtsp://admin:admin123456@10.0.1.12:554/stream1',
    x: '30',
    y: '330',
  },
  {
    title: '西库房',
    url: 'rtsp://admin:admin123456@10.0.1.13:554/stream1',
    x: '85',
    y: '330',
  },
  {
    title: '配电室',
    url: 'rtsp://admin:guyaqi5858@10.0.1.14:554/stream1',
    x: '85',
    y: '295',
  },
  {
    title: '宿舍门口',
    url: 'rtsp://admin:guyaqi5858@10.0.1.15:554/stream1',
    x: '90',
    y: '445',
  },
  {
    title: '东库房门口',
    url: 'rtsp://admin:guyaqi5858@10.0.1.16:554/stream1',
    x: '180',
    y: '325',
  },
  {
    title: '路东',
    url: 'rtsp://admin:guyaqi5858@10.0.1.17:554/stream1',
    x: '220',
    y: '525',
  },
  {
    title: '警卫室前',
    url: 'rtsp://admin:guyaqi5858@10.0.1.18:554/stream1',
    x: '150',
    y: '470',
  },
  {
    title: '路西',
    url: 'rtsp://admin:guyaqi5858@10.0.1.19:554/stream1',
    x: '20',
    y: '510',
  },
  {
    title: '大\n路\n1',
    url: 'rtsp://admin:guyaqi5858@10.0.1.20:554/stream1',
    x: '130',
    y: '420',
  },
  {
    title: '大\n路\n2',
    url: 'rtsp://admin:guyaqi5858@10.0.1.21:554/stream1',
    x: '130',
    y: '370',
  },
  {
    title: '大\n路\n4',
    url: 'rtsp://admin:guyaqi5858@10.0.1.22:554/stream1',
    x: '130',
    y: '220',
  },
  {
    title: '大\n路\n3',
    url: 'rtsp://admin:guyaqi5858@10.0.1.23:554/stream1',
    x: '130',
    y: '270',
  },
]

const canvasHeight = 560
const canvasScale = ref('scale(100%)')

onMounted(() => {
  canvasScale.value = `scale(${100 * screen.height / canvasHeight}%)`
})
/*
computed(() => {
    return `scale(50%)`
}) */
</script>

<template>
  <div class="cctv-root">
    <div class="canvas" :style="{ height: `${canvasHeight}px`, transform: canvasScale }">
      <img class="satellite" src="/satellite.png">
      <a
        v-for="camera in cameras"
        :key="camera.url"
        :href="camera.url"
      >
        <Tag
          class="btn-camera"
          type="warning"
          :style="{ top: `${camera.y}px`, left: `${camera.x}px` }"
        >
          {{ camera.title }}
        </Tag>
      </a>
    </div>
  </div>
</template>

<style scoped>
.cctv-root {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.canvas {
    position: relative;
}
.satellite {
    height: 100%;
    width: auto;
}

.btn-camera {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: pre;
}
</style>
